<template>
  <div class="p-2">
    <!-- IOT平台首页 - IOT监控总览 -->
    <!-- 统计数据卡片 -->
    <el-row :gutter="8" align="middle">
      <el-col :span="24" :xs="24">
        <el-card shadow="hover" style="margin-bottom: 8px; background-color: #f8f9fb; border: 0px">
          <span style="font-size: 15px; font-weight: bold">IOT平台监控总览</span>
          <el-row>
            <el-col :span="4" :xs="24" align="center">
              <el-card shadow="hover" class="mb-8" style="background-color: #fff; margin: 5px; border-radius: 8px">
                <div style="text-align: center;">
                  <div style="margin-bottom: 8px;">
                    <el-icon size="24" color="#409EFF">
                      <Platform />
                    </el-icon>
                    <span class="card-span" style="margin-left: 8px;">设备总数</span>
                  </div>
                  <div>
                    <span style="font-size: 20px; font-weight: bold">{{ totalDevices }}</span>
                    <span style="margin-left: 4px;">台</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="4" :xs="24" align="center">
              <el-card shadow="hover" class="mb-8" style="background-color: #fff; margin: 5px; border-radius: 8px">
                <div style="text-align: center;">
                  <div style="margin-bottom: 8px;">
                    <el-icon size="24" color="#67C23A">
                      <CircleCheck />
                    </el-icon>
                    <span class="card-span" style="margin-left: 8px;">在线设备</span>
                  </div>
                  <div>
                    <span style="font-size: 20px; font-weight: bold">{{ onlineDevices }}</span>
                    <span style="margin-left: 4px;">台</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="4" :xs="24" align="center">
              <el-card shadow="hover" class="mb-8" style="background-color: #fff; margin: 5px; border-radius: 8px">
                <div style="text-align: center;">
                  <div style="margin-bottom: 8px;">
                    <el-icon size="24" color="#F56C6C">
                      <CircleClose />
                    </el-icon>
                    <span class="card-span" style="margin-left: 8px;">离线设备</span>
                  </div>
                  <div>
                    <span style="font-size: 20px; font-weight: bold">{{ offlineDevices }}</span>
                    <span style="margin-left: 4px;">台</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="4" :xs="24" align="center">
              <el-card shadow="hover" class="mb-8" style="background-color: #fff; margin: 5px; border-radius: 8px">
                <div style="text-align: center;">
                  <div style="margin-bottom: 8px;">
                    <el-icon size="24" color="#E6A23C">
                      <Warning />
                    </el-icon>
                    <span class="card-span" style="margin-left: 8px;">告警数量</span>
                  </div>
                  <div>
                    <span style="font-size: 20px; font-weight: bold">{{ alarmCount }}</span>
                    <span style="margin-left: 4px;">条</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" :xs="24" align="left">
              <!-- 设备状态分布图表 -->
              <div id="deviceStatusChart" ref="deviceStatusChart" style="width: 100%; height: 170px"></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 实时监控数据 -->
    <el-row :gutter="8">
      <el-col :span="12" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <span style="font-size: 15px; font-weight: bold">实时数据监控</span>
          </template>
          <div id="realTimeChart" ref="realTimeChart" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <span style="font-size: 15px; font-weight: bold">最新告警信息</span>
          </template>
          <el-table :data="alarmList" style="width: 100%" max-height="300">
            <el-table-column prop="alarmTime" label="告警时间" width="120" />
            <el-table-column prop="deviceName" label="设备名称" width="120" />
            <el-table-column prop="alarmType" label="告警类型" width="100">
              <template #default="scope">
                <el-tag :type="getAlarmTypeTag(scope.row.alarmType)">{{ scope.row.alarmType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="alarmContent" label="告警内容" show-overflow-tooltip />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统运行状态 -->
    <el-row :gutter="8" style="margin-top: 8px">
      <el-col :span="8" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <span style="font-size: 15px; font-weight: bold">服务器状态</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="CPU使用率">
              <el-progress :percentage="serverStatus.cpuUsage" :color="getProgressColor(serverStatus.cpuUsage)" />
            </el-descriptions-item>
            <el-descriptions-item label="内存使用率">
              <el-progress :percentage="serverStatus.memoryUsage" :color="getProgressColor(serverStatus.memoryUsage)" />
            </el-descriptions-item>
            <el-descriptions-item label="磁盘使用率">
              <el-progress :percentage="serverStatus.diskUsage" :color="getProgressColor(serverStatus.diskUsage)" />
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <span style="font-size: 15px; font-weight: bold">网络状态</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="网络延迟">{{ networkStatus.latency }}ms</el-descriptions-item>
            <el-descriptions-item label="上行带宽">{{ networkStatus.uploadSpeed }}</el-descriptions-item>
            <el-descriptions-item label="下行带宽">{{ networkStatus.downloadSpeed }}</el-descriptions-item>
            <el-descriptions-item label="连接状态">
              <el-tag :type="networkStatus.status === '正常' ? 'success' : 'danger'">{{ networkStatus.status }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <span style="font-size: 15px; font-weight: bold">快捷操作</span>
          </template>
          <el-space direction="vertical" style="width: 100%">
            <el-button type="primary" style="width: 100%" @click="goToDeviceManage">
              <el-icon>
                <Monitor />
              </el-icon>
              设备管理
            </el-button>
            <el-button type="success" style="width: 100%" @click="goToAlarmManage">
              <el-icon>
                <Bell />
              </el-icon>
              告警管理
            </el-button>
            <el-button type="warning" style="width: 100%" @click="goToDataAnalysis">
              <el-icon>
                <TrendCharts />
              </el-icon>
              数据分析
            </el-button>
            <el-button type="info" style="width: 100%" @click="goToSystemConfig">
              <el-icon>
                <Setting />
              </el-icon>
              系统配置
            </el-button>
          </el-space>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="IOTIndex" lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { Platform, CircleCheck, CircleClose, Warning, Monitor, Bell, TrendCharts, Setting } from '@element-plus/icons-vue'

// 响应式数据
const totalDevices = ref(1256)
const onlineDevices = ref(1089)
const offlineDevices = ref(167)
const alarmCount = ref(23)

// 图表引用
const deviceStatusChart = ref()
const realTimeChart = ref()

// 服务器状态
const serverStatus = ref({
  cpuUsage: 45,
  memoryUsage: 67,
  diskUsage: 32
})

// 网络状态
const networkStatus = ref({
  latency: 12,
  uploadSpeed: '50 Mbps',
  downloadSpeed: '100 Mbps',
  status: '正常'
})

// 告警列表
const alarmList = ref([
  {
    alarmTime: '14:32',
    deviceName: '传感器001',
    alarmType: '高温',
    alarmContent: '设备温度超过阈值85°C'
  },
  {
    alarmTime: '14:28',
    deviceName: '网关002',
    alarmType: '离线',
    alarmContent: '设备连接中断，请检查网络'
  },
  {
    alarmTime: '14:15',
    deviceName: '摄像头003',
    alarmType: '故障',
    alarmContent: '设备响应异常，建议重启'
  }
])

// 获取告警类型标签样式
const getAlarmTypeTag = (type: string) => {
  switch (type) {
    case '高温': return 'danger'
    case '离线': return 'warning'
    case '故障': return 'info'
    default: return 'primary'
  }
}

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
  if (percentage < 50) return '#67C23A'
  if (percentage < 80) return '#E6A23C'
  return '#F56C6C'
}

// 初始化设备状态分布图表
const initDeviceStatusChart = () => {
  const chart = echarts.init(deviceStatusChart.value)
  const option = {
    title: {
      text: '设备状态分布',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '设备状态',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '60%'],
        data: [
          { value: onlineDevices.value, name: '在线设备', itemStyle: { color: '#67C23A' } },
          { value: offlineDevices.value, name: '离线设备', itemStyle: { color: '#F56C6C' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化实时数据监控图表
const initRealTimeChart = () => {
  const chart = echarts.init(realTimeChart.value)
  const hours = []
  const data = []

  // 生成24小时的模拟数据
  for (let i = 0; i < 24; i++) {
    hours.push(i + ':00')
    data.push(Math.floor(Math.random() * 100) + 50)
  }

  const option = {
    title: {
      text: '设备数据传输量',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: hours
    },
    yAxis: {
      type: 'value',
      name: '传输量(MB)'
    },
    series: [
      {
        data: data,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ])
        }
      }
    ]
  }
  chart.setOption(option)
}

// 快捷操作导航
const goToDeviceManage = () => {
  // 跳转到设备管理页面
  console.log('跳转到设备管理')
}

const goToAlarmManage = () => {
  // 跳转到告警管理页面
  console.log('跳转到告警管理')
}

const goToDataAnalysis = () => {
  // 跳转到数据分析页面
  console.log('跳转到数据分析')
}

const goToSystemConfig = () => {
  // 跳转到系统配置页面
  console.log('跳转到系统配置')
}

// 组件挂载后初始化图表
onMounted(() => {
  nextTick(() => {
    initDeviceStatusChart()
    initRealTimeChart()
  })
})
</script>

<style scoped>
.card-img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}

.card-span {
  font-size: 14px;
  color: #666;
  vertical-align: middle;
}

.mb-8 {
  margin-bottom: 8px;
}
</style>